<template>
   <div class="sidebar">
    <el-header style="background-color: rgb(0,175,240);height:48px;padding:0;">
    <el-col :span="4" push="1" style="background-color:rgb(4,166,226)">
        <img src="../assets/images/u15209.png" alt="" style="margin-top:5px;margin-left:20px;">
        <span class="SBtitle">
            工地中心
        </span>
    </el-col>
    </el-header>
    <el-container>
    <el-aside width="21%">
    <el-col :span="19" push="5">
        <div style="height:20px;width:100%;"></div>
        <div style="height:10px;width:100%;background-color:#00aff0"></div>
        <el-menu
        default-active="2"
        background-color="#fafafa"
        text-color="rgb(51,51,51)">
            <el-menu-item-group>
            <template slot="title">
                <div class="groupT">
                    - 基本资料
                </div>
            </template>
            <el-menu-item index="1-1" @click='changeMain("personal")'><div class="groupC">个人资料</div></el-menu-item>
            <el-menu-item index="1-2" @click='changeMain("mysite")'><div class="groupC">我的工地</div></el-menu-item><!-- 改“profile1” -->
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 交易管理</div>
                </template>
                <el-menu-item index="1-1" @click='changeMain("MyOrders")'><div class="groupC">我的订单</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC">我的合同</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("PoudListBar")'><div class="groupC">我的磅单</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 账号安全</div>
                </template>
                <el-menu-item index="1-1" @click='changeMain("Code")'><div class="groupC">登陆密码</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 财务管理</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC" @click='changeMain("CountBar")'>账户余额</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC"  @click='changeMain("BillManageBar")' >账单管理</div></el-menu-item>
                         <!-- <el-menu-item index="1-2"><div class="groupC"  @click='changeMain("payment")' >账单管理</div></el-menu-item> -->
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 增值服务</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">技术支持</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC">我的积分</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 系统管理</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">人员管理</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("")'><div class="groupC">我的消息</div></el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </el-col>
    </el-aside>
    <el-col :span="20">
        <component :is="currentComponent"></component>
    </el-col>
    </el-container>
   </div>
</template>
<script>
export default {
    inject:["reload"],
    name:'SideBar',
    data() {
        return{
            currentComponent:"personal"
        }
    },
    components: {
        personal(resolve) {require(["./personal.vue"], resolve); },
        mysite(resolve) {require(["./mysite.vue"], resolve); },
        MyOrders(resolve) {require(["./MyOrders.vue"], resolve); },
        Code(resolve) {require(["./Code.vue"], resolve); },
        PoudListBar(resolve) {require(["./PoudListBar.vue"], resolve); },
        CountBar(resolve) {require(["./CountBar.vue"], resolve); },
        BillManageBar(resolve) {require(["./BillManageBar.vue"], resolve); },
        //以下为测试使用
       Billdetailsmon(resolve) {require(["./Billdetailsmon.vue"], resolve); },
       Billdetailspre(resolve) {require(["./Billdetailspre.vue"], resolve); },
       payment(resolve) {require(["./payment.vue"], resolve); }
        // ，组件名(resolve) {require(["./组件名.vue"], resolve); }
    },
    methods:{
        changeMain:function(obj){
            this.currentComponent = obj;
        }
    }
}
</script>
<style scoped>
.groupT{
    height: 30px;
    width: 100%;
    background-color: #f5f7fa;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 30px;
}
.el-menu-item{
    padding: 0 ! important;
}
.groupC{
    height: 56px;
    width: 100%;
    background-color: white;
    color: #00aff0;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    padding-left: 25px;
    line-height: 56px;
}
.SBtitle{
    color: white;
    font-size: 20px;
}
</style>